<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小谭</title>
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../util/swiper-4.5.0/dist/css/swiper.min.css">
    <script src="../util/jquery-3.4.0.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <script src="../util/swiper-4.5.0/dist/js/swiper.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>
    <link rel="stylesheet" href="../util/viewer.css">
    <script src="../util/viewer.js"></script>
    <link rel="stylesheet" href="../util/layui-v2.4.5/layui/css/layui.css">
    <script src="../util/layui-v2.4.5/layui/layui.js"></script>
    <style>
        p{
            margin: 0 0 5px;
        }

        #main,#main1{
            margin-left: 50px;
        }
        .box{
            width:100%;
            height:180px;
            border:1px solid #000;
            border-radius:10px;
            overflow:hidden;
            margin-top: 10px;
            margin-left: 10px;
        }
        h3{
            height:30px;
            line-height:30px;
            text-align:center;
            font-size:28px;
            color:#fff;
            background:deepskyblue;
        }
        .content{
            height:200px;
            overflow:hidden;
        }
        .msg1 li{
            list-style:none;
            height:30px;
            line-height:30px;
            text-align:left;
            padding-left:20px;
            font-size:18px;
            color:#333;
        }
        .msg1 li:hover{color:#f91;}
        .msg2 li:hover{color:#f91;}
        .index-School-activities{
            width: 100%;
            height: 360px;
            margin-left: 20px;
        }
        .layui-tab-title li{
            width: 200px;
        }
        .index-notice{

            margin-top: 10px;
            margin-left: 10px;

            width: 100%;
            height: 180px;
            overflow: hidden;
            border: 1px solid black;
            border-radius:10px;
        }
        .layui-timeline-item{
            padding-bottom: 3px;
        }
        .index-notice-p{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-sm-4">
            <div class="box ">
                <h3>优秀职工</h3>
                <div class="content">
                    <ul class="msg1" id="msg1">
                        <li>恭喜王老师获得最佳家长信任奖</li>
                        <li>恭喜李老师获得最佳班主任奖</li>
                        <li>恭喜王师傅获得最佳后勤奖</li>
                        <li>恭喜赵老师获得最佳学科老师奖</li>
                        <li>恭喜王老师获得最佳家长信任奖</li>
                    </ul>
                </div>
            </div>
            </div>
            <div class="col-md-4 col-sm-4">
                <div id="main"  style="width: 300px;height:200px;margin-top: 10px"></div>
            </div>
            <div class="col-md-4 col-sm-4">
                <div id="main1" style="width: 300px;height:200px;margin-top: 10px"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-4">
                <div class="box">
                    <h3>优秀学生</h3>
                    <div class="content">
                        <ul class="msg1" id="msg2">
                            <li>恭喜小明同学获得拾金不昧奖</li>
                            <li>恭喜小王同学获得最佳三好学生奖</li>
                            <li>恭喜小李同学获得最佳创意奖</li>
                            <li>恭喜小艾同学获得大力士奖</li>
                            <li>恭喜小明同学获得拾金不昧奖</li>
                        </ul>
                    </div>
                </div>
                <div class="index-notice">
                    <p class="index-notice-p">公告</p>
                    <ul class="layui-timeline">
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">今天停电，学校放假半天</div>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">恭喜小明同学获得拾金不昧奖</div>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">恭喜幼稚园2班班主任获得月度最佳奖</div>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">恭喜本校获得年度最佳奖</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="col-md-8 col-sm-8">
            <div class="index-School-activities">
                <fieldset class="layui-elem-field layui-field-title">
                </fieldset>

                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">野外训练营</li>
                        <li>中国风训练营</li>
                        <li>外国风训练营</li>
                    </ul>
                    <div class="layui-tab-content" id="viewer" style="height: 285px;">
                        <div class="layui-tab-item layui-show">
                            <div class="row">
                                <img src="../image/index/7.png" alt="" data-original="../image/index/7.png" width="150" height="80" class="col-xs-3">
                                <span class="col-xs-9">现在很多孩子存在下列现象：粗心大意、摩擦拖沓、人际紧张、脆弱依赖、缺乏独立、指令缺失、对抗父母。
养成良好的四大习惯：行为习惯、生活习惯、学习习惯、交往习惯。让孩子度过一个安全而又愉快的有意义的假期生活。</span>
                            </div>
                            <div class="row">
                                <span class="col-xs-9">提升孩子自我管理的能力，团体协作能力，自我保护能力，自我激励能力，挫折承受能力，环境适应能力；改变不良习惯，逐渐提升孩子的注意力，吃苦耐劳，艰苦奋斗，磨炼意志，懂得感恩</span>
                                <img src="../image/index/10.png" data-original="../image/index/10.png" alt="" width="150" height="80" class="col-xs-3">
                            </div>
                            <div class="row">
                                <img src="../image/index/11.png" data-original="../image/index/11.png" alt="" width="150" height="80"class="col-xs-3">
                                <span class="col-xs-9">1、亲近自热，与大自然零距离接触2、锻炼独立生活能力，培养劳动意识3、学会基本的野外生存知识及紧急避险与救护技能</span>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="row">
                                <img src="../image/index/8.png" alt="" data-original="../image/index/8.png" width="150" height="80" class="col-xs-3">
                                <span class="col-xs-9">一个长城传说，一段长城历史，一段长城历史，一份文化认同，一份文化认同，一种长城精神</span>
                            </div>
                            <div class="row">
                                <span class="col-xs-9">旨在使营员在八达岭长城感受中国长城建筑史的深厚，在慕田峪长城体验戚继光精忠报国的胸襟，在金山岭长城领略中国国歌诞生的艰苦卓绝，在居庸关长城品味两千年中国长城文化的深邃。</span>
                                <img src="../image/index/12.png" data-original="../image/index/12.png" alt="" width="150" height="80" class="col-xs-3">
                            </div>
                            <div class="row">
                                <img src="../image/index/13.png" data-original="../image/index/13.png" alt="" width="150" height="80"class="col-xs-3">
                                <span class="col-xs-9">“长城”，是一个多么响亮的名字，她蜿蜒万里，气魄雄伟，她是人类的巨著，是中华民族精神的灵魂。</span>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="row">
                                <img src="../image/index/9.png" alt="" data-original="../image/index/9.png" width="150" height="80" class="col-xs-3">
                                <span class="col-xs-9">提高学生的听说读写能力，全方位hold住学术英语，为将来留学学习打下坚实基础！</span>
                            </div>
                            <div class="row">
                                <span class="col-xs-9">越早开始，顺利申请到 理想项目的概率越大，夏校申请需要提前做好规划和准备。好事不多磨，即刻预约国际 规划师开启与名校的仲夏夜之梦</span>
                                <img src="../image/index/14.png" data-original="../image/index/14.png" alt="" width="150" height="80" class="col-xs-3">
                            </div>
                            <div class="row">
                                <img src="../image/index/15.png" data-original="../image/index/15.png" alt="" width="150" height="80" class="col-xs-3">
                                <span class="col-xs-9">提前体验生 活，结识来自世界各国的小 伙伴，提高社交领域和沟通 能力.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</body>
<script src="../js/index/base.js"></script>
</html>